<template>
    <div class="info-collect">
        <Crumb name="Sparepart Statistic"> </Crumb>
        <div class="content">
            <Search>
                <el-select v-model="belongModules" placeholder="Please Select Location" size="small">
                    <el-option
                            label="Morrowali"
                            value="1">
                    </el-option>
                    <el-option
                            label="Weda"
                            value="2"
                    ></el-option>
                    <el-option
                            label="All"
                            value=""
                    ></el-option>
                </el-select>

                <el-select v-model="week" placeholder="Week" filterable size="small" style="width:220px">
                    <el-option
                            v-for="item in weekList"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>

                <el-button
                        size="small"
                        type="primary"
                        @click="search"
                > 搜索
                </el-button>
                <el-button
                        size="small"
                        type="primary"
                        @click="download"
                > Download
                </el-button>

            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="weekReport.slice((pageNum-1)*pageSize,pageSize*pageNum)"
                        border
                        row-key="id"
                        @filter-change="handleFilterChange"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="partsNumber"
                            label="配件编号"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="denomination"
                            label="名称"
                            width="350px"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.denomination}}/{{scope.row.designation}}</span>
                        </template>
                    </el-table-column>

                    <!--<el-table-column-->

                            <!--prop="systemName"-->
                            <!--:filters="uniSystem"-->
                            <!--label="系统"-->
                    <!--&gt;-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->

                            <!--prop="hostNumber"-->
                            <!--:filters="uniUnit"-->
                            <!--label="适配主机"-->
                    <!--&gt;-->
                    <!--</el-table-column>-->
                    <el-table-column
                            prop="calculationStock"
                            label="库存"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.warning" style="color: #c60023;font-weight: 800">
                                {{scope.row.stockQuantity}}
                            </div>
                            <div v-else>{{scope.row.stockQuantity}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="safeStock"
                            label="安全库存"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="consignmentOrder"
                            label="Consignment"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="shipInformation"
                            label="Ship Info    "
                    >
                    </el-table-column>
                    <el-table-column
                            label="总进/总出/%"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.sumStockIn}} /{{scope.row.sumStockOut}} /{{scope.row.percentage}}</span>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import {getUniSystem, getUniUnit} from "../../api";
    import authMixins from '../../util/authMixins'
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import {baseURL} from "../../util";
    import {getWeek, getWeekReport} from "../../api/shanxi";

    export default {
        name: "part-list",
        mixins: [mixins, authMixins],
        data() {
            return {
                week:'',
                belongModules: '',  //所属模块
                uniSystem: [],
                uniUnit: [],
                weekList: [],
                weekReport: [],
                filterOption: [],
                key: '',
                key1: '',
                dialogVisible: false,
                showSys: true,
            }
        },
        created() {
            this.getWeek();
            this.getUniSystem();
            this.getUniUnit()
        },

        filters: {
            money(num) {
                return num && num.toString()
                    .replace(/^\d+/g, (m) => m.replace(/(?=(?!^)(\d{3})+$)/g, ','))
            }
        },
        methods: {
            download(){
                window.open(baseURL + `/week/statistical_report/excel_week_statistical_report.file?statisticalReportDate=${this.week}&belongModule=${this.belongModules}`)
            },
            search() {
                this.pageNum = 1;
                this.getWeekReport()
            },
            async getWeekReport(){
                if(!this.week) {
                    this.$message.warning('Please Select Week');
                    return
                }
                const {status,data} = await getWeekReport(this.week);
                if(status === ERROR_OK) {
                    this.weekReport = data
                }
            },
            async getWeek(){
                const {status,data} = await getWeek();
                if(status === ERROR_OK) {
                    this.weekList = data;
                }
            },
            changePage(page) {
                this.pageNum = page;
                this.getInventory();
            },
            async handleFilterChange(filter) {
                Object.keys(filter).forEach((key) => {
                    this.filterOption = filter[key]
                });
            },
            async getUniUnit() {
                const {status, data} = await getUniUnit();
                if (status === ERROR_OK) {

                    this.uniUnit = data.map(item => {
                        return {
                            text: item,
                            value: item
                        }
                    });
                }
            },
            async getUniSystem() {
                const {status, data} = await getUniSystem();
                if (status === ERROR_OK) {
                    this.uniSystem = data.map(item => {
                        return {
                            text: item,
                            value: item
                        }
                    });
                }
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .info-collect {
        background: #f6;
        label {
            display: inline-block;
            line-height: 30px;
            padding: 0 20px;
            border-radius: 3px;
            cursor: pointer;
            background: #409eff;
            height: 30px;
            color: white;
            text-align: center;
            font-size: 14px;
            margin-left: 20px;
            &:hover {
                background: #6495ed;
            }
        }
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
        .sum {
            position: absolute;
            font-size: 12px;
            width: 150px;
            height: 100px;
            right: 0px;
            top: 150px;
            padding: 0 50px;
            text-align: left;
            .title {
                margin: 0;
            }
        }
        .link-btn {
            @include linkBtn
        }
    }
</style>